<!-- 将md文件转换成html以组件形式显示渲染 -->
<!-- 未能成功 -->
<template>
  <div class="container">
    <div class="content">
      <div class="markdown-body">
        <Docu1 />
        <Docu2 />
      </div>
    </div>
  </div>
</template>

<script>
// 这是md文档的路径
import Docu1 from '../assets/test1.md';
import Docu2 from '../assets/test2.md';
import 'highlight.js/styles/github.css';
import 'github-markdown-css/github-markdown.css';
export default {
  components: {
    Docu1,
    Docu2
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #f1f1f1;
  .content {
    min-width: 800px;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 50px;
    background: #fff;
  }
}
.markdown-body {
  text-align: left;
}
</style>

<!-- <template>
  <div class="markdown-body">
    <VueMarkdown :source="mdData"  v-highlight></VueMarkdown>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';
// 这种方式引入 数据可直接使用
import markdownData from '../assets/test1.md'
import 'highlight.js/styles/github.css'
import 'github-markdown-css/github-markdown.css'
// import * as hljs from 'highlight.js'
export default {
  components: {
    VueMarkdown
  },
  data() {
    return {
      mdData: markdownData
    }
  },
}
</script> -->
